<template>
  <div class="app-container">
    <div class="settle-manage">
      <div class="manage-left">
        <el-label style="width: 100%;">企业列表</el-label>
        <el-button type="primary" @click="handleSelect" style="margin-top: 10px;width: 100%;height: 30px;">
          选择企业
        </el-button>
        <el-input
          v-model="filterEnterprise"
          class="w-60 mb-2"
          placeholder="请输入企业名称"
          style="margin-top: 10px;"
        />
        <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data.list"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :filter-node-method="filterNode"
        />
      </div>
      <div class="manage-right">
        <el-tabs v-model="activeName"  @tab-click="handleClick">
          <el-tab-pane label="房租管理" name="rent">
            <RentInfo ref="rentRef"/>
          </el-tab-pane>
          <el-tab-pane label="电表管理" name="ele">
            <ElectricMeterInfo ref="eleRef"/>
          </el-tab-pane>
          <el-tab-pane label="水表管理" name="water">
            <WaterMeterInfo ref="waterRef"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 结算企业结算单弹窗 -->
    <EnterpriseListSettingDialog ref="enterpriseListDialogRef" @setting="selectEnterprise" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
import RentInfo from './components/RentInfo.vue'
import ElectricMeterInfo from './components/ElectricMeterInfo.vue'
import WaterMeterInfo from './components/WaterMeterInfo.vue'
import EnterpriseListSettingDialog from './components/EnterpriseListSettingDialog.vue'
import { getEnterpriseTree } from '@/api/settle';
import type { TreeInstance } from 'element-plus'

const filterEnterprise = ref('')
const treeRef = ref<TreeInstance>()
interface Tree {
  [key: string]: any
}
const data = reactive({
  list: [] as any
})

const defaultProps = {
  children: 'children',
  label: 'label',
}

watch(filterEnterprise, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const enterpriseId = ref(0)
const rentRef = ref<any>({})
const eleRef = ref<any>({})
const waterRef = ref<any>({})
const activeName = ref('rent')

const getEnterpriseListFn = () => {
  getEnterpriseTree().then((res: any) => {
    if (res.success) {
      data.list = res.data || []
    } else {
      console.error('获取企业列表失败:', res.msg || '未知错误')
      data.list = []
    }
  })
  .catch((err: any) => {
    console.error('获取企业列表失败:', err.msg || err.message || '网络错误')
    data.list = []
  })
}

const handleNodeClick = (nodeData: any) => {  
  // 只有点击企业节点时才执行相关操作
  if (nodeData.type === 'company') {
    const selectedEnterpriseId = nodeData.id
    // 更新全局项目ID
    enterpriseId.value = selectedEnterpriseId
    let tabName = activeName.value
    rentRef.value.enterpriseId = selectedEnterpriseId
    eleRef.value.enterpriseId = selectedEnterpriseId
    waterRef.value.enterpriseId = selectedEnterpriseId
    rentRef.value.tenantId = nodeData.tenantId
    eleRef.value.tenantId = nodeData.tenantId
    waterRef.value.tenantId = nodeData.tenantId

    if (tabName == 'rent') {
      rentRef.value.getList()
    } else if (tabName == 'ele') {
      eleRef.value.getList()
    } else if (tabName == 'water') {
      waterRef.value.getList()
    }

  } else if (nodeData.type === 'location') {
    console.log('点击了商户名称:', nodeData.label)
    // 点击地点位置时不执行任何操作，只是展开/收起子节点
  }
}

const handleClick = (tab: any, event: Event) => {
  let tabName = tab.props.name
  activeName.value = tabName
  if (tabName == 'rent') {
    rentRef.value.getList()
  } else if (tabName == 'ele') {
    eleRef.value.getList()
  } else if (tabName == 'water') {
    waterRef.value.getList()
  }
}

const enterpriseListDialogRef = ref<any>(null);
const handleSelect = () => {
  enterpriseListDialogRef.value.openDialog();
}

const selectEnterprise = (val: string) => {
  filterEnterprise.value = val
}

onMounted(() => {
  getEnterpriseListFn()
})

</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - $headerHeight - 38px - 40px);
}
.el-tree {
  margin-top: 10px;
  font-size: 12px;
}
:deep(.el-tabs__header) {
  display: block;
}
.settle-manage {
  position: relative;
  height: 100%;
  .manage-left {
    position: absolute;
    width: 160px;
    padding-right: 10px;
    border-right: 1px solid #efefef;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: scroll;
  }
  .manage-right {
    margin-left: 160px;
    padding-left: 20px;
    height: 100%;
  }
}
</style>